<template>
  <div class="catetory_nav">
      <div class="catetoryleft_nav">
            <van-sidebar v-model="catetoryone">
                <van-sidebar-item v-for="(item,index) in navList" :key="index" :title="item.category_cn" @click="navone(item)"/>
            </van-sidebar>
      </div>
      <div class="catetoryright_nav">
        <div class="catetoryright_nav_one" v-for="(item,index) in navtwolist" :key="index">
            <img :src="item.img" alt="">
            <p>{{item.category_cn}}</p>
        </div>
      </div>
  </div>
</template>

<script>
import {getNavs} from "../../../api/home"
export default {
    name:'catetorylist',
    data() {
        return {
            catetoryone:0,
            navList:[],
            navtwolist:[]
            // category_id:''
        }
    },
    created() {
        getNavs().then(res=>{
            // console.log("navList---",res)
            this.navList = res.result.data
            getNavs({category_id:res.result.data[0].category_id}).then(res=>{
            // console.log("navList---",res)
            this.navtwolist = res.result.data
        })
        })
    },
    methods: {
        navone(i){
            // console.log(i)
            getNavs({category_id:i.category_id}).then(res=>{
            // console.log("navList---",res)
            this.navtwolist = res.result.data
        })
        }
    },
}
</script>

<style lang="less" scoped>

.catetory_nav{
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
    // width: 30%;
    width: 100%;
    padding-bottom: 200px;
    .catetoryleft_nav{
        width: 20%;
        height: 90vh;
        border-right: 5px solid #f20;
        position: fixed;
        top: 100;
    }
    .catetoryright_nav{
        margin-left: 20%;
        width: 80%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .catetoryright_nav_one{
            width: 30%;
            height: 150px;
            background-color: white;
            margin-top: 20px;
            border-radius: 20px;
            p{
                height: 60px;
                line-height: 60px;
                font-size: 20px;
            }
            img{
                width: 80%;
                height: 50%;
            }
        }
    }
    
}
</style>